<!-- eslint-disable vue/multi-word-component-names -->
<template>
    <div id="header">
        <div class="layout header">
        <router-link to="/" class="logo">
            <img src="../assets/icon/logo1.png" class="logo-img" alt="">
        </router-link>
        <div class="search-box">
            <el-input v-model="keyword" placeholder="请输入内容">
                <el-button slot="append" icon="el-icon-search" @click="searchTap"></el-button>
            </el-input>
        </div>
    </div>
    </div>
</template>
<script>
import Api from "@/Api.js";
export default {
    data() {
        return {
            keyword:'',
        }
    },
    methods: {
      //关键词搜索 
      searchTap(){
        console.log(11111)
        this.$router.push({
            path: '/articles',
            query: {
                page: 1,
                keywords: this.keyword,
            }, 
        },
        ()=>{}, ()=>{},
        );
      },
    },
    mounted() {
        this.keyword = this.$route.query.keywords;
    },
    watch: {
        '$route' () {
            this.keyword = this.$route.query.keywords;
        }
    }
}
</script>
 
<style scoped lang="less">
/* scoped 让style样式 局部生效*/
#header{
    width: 100%;
    position: relative;
    z-index: 10;
    background: #ffffff;
}
.header {
    height: 120px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .search-box{
        display: flex;
        align-items: center;
    }
    
    .logo-img{
        width: auto;
        height: 76px;
    }
}

</style>